import React, {Component} from 'react';
import {Popup, Tab,Button,Group,Field ,NumberPicker,SelectField, TextField,NoticeBar,CheckboxField,Toast,SwitchField } from 'saltui';
import InputText from '../diy/InputText'
import InputSwitch from '../diy/InputSwitch'
import  Ajax  from '../../../../Common/Ajax';

/**
 *  <CheckIn room   buttonName >
 */
export default class TipAdd extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
      prices :[],
      data:{
        id:this.props.id,
        name:this.props.name,
        number:this.props.number,
        refund:Boolean(this.props.refund),
      }
    };
    this.state.buttonName = this.props.buttonName;

  }

  handleChange = (id,value) =>{

  }

  handleTextChange = (value) =>{
    let data = this.state.data;
    data.name = value;
    this.setState({data:data});
  }

  handleSave = () =>{
    Toast.show({
      type: 'loading',
      content: '保存中...',
      autoHide:false
    });

    setTimeout(() => {
      Ajax.post("finance/tip/save",this.state.data);
      Toast.hide(() => {
      });

      Toast.show({
        type: 'loading',
        content: '保存成功',
      });

      Popup.hide();
      this.props.onChange(this.props.typeid);

    }, 2000);
  }

  handleTextChangeNumber = (value) =>{
    let data = this.state.data;
    data.number = value;
    this.setState({data:data});
  }

  handleTextChangeSwitch= (key,value) =>{
    let data = this.state.data;
    data.refund =Number(value) ;
    this.setState({data:data});
  }


  render() {
    return <div className="demo-popup-container">     <Group.List >
      <Field label="服务费" tip={<div>输入服务费名字</div>}>
        <div>
          <InputText value={this.state.data.name} onChange={this.handleTextChange}  />
        </div>
      </Field>

      <Field label="税率" tip={<div>请输入百分比</div>}>
        <div>
          <InputText value={this.state.data.number}  onChange={this.handleTextChangeNumber}  />
        </div>
      </Field>

      <Field label="是否可退" tip={<div>请选择是否可退</div>}>
        <div>
          <InputSwitch label="默认不可退" key="refund" value={this.state.data.refund}   onChange={this.handleTextChangeSwitch} />
        </div>
      </Field>
    </Group.List>
      <div className="notice-div">
        <NoticeBar className="noticeMessage" message={'提交服务费'} closable={false} type="warning" />
      </div>
      <div className="demo-line">
        <Button type="secondary"  size="small" onClick={this.handleSave} >提交</Button>
        <Button type="secondary"  size="small" onClick={Popup.hide} >取消</Button>
      </div></div>
  }
}
